<template>
  <el-card shadow="always" class="operator">
    <div>
      <div
        style="
          margin: 20px 0px 0px 20px;
          display: flex;
          justify-content: space-between;
        ">
        <div><span>转换规则文件</span></div>
        <div>{{text11}}</div>
        <div>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入名称搜索"
            style="width: 200px; margin-right: 20px" />
          <!-- <el-select
            v-model="value"
            placeholder="请选择类型"
            size="mini"
            style="margin-right: 20px">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="类别1" :value="1"></el-option>
            <el-option label="类别2" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="tagValue"
            placeholder="请选择标签"
            size="mini"
            style="margin-right: 20px">
            <el-option label="全部" :value="0"></el-option>
            <el-option
              v-for="item in tagItem"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select> -->
          <el-button type="primary" size="mini" @click="handleSearch">
            查询
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 120px"
            @click="onAdd">
            新增
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 50px"
        @row-click="handleClick">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="createtime" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
            <template>
              <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteRow(scope.row)">
                <el-button
                  type="text"
                  size="small"
                  style="color: red; margin-left: 10px"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
            <!-- <el-button
              type="text"
              size="small"
              style="color: red"
              @click="deleteRow(scope.row)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <Customdialog
        v-if="dialogOptions.visible"
        :options="dialogOptions"
        :row="currentRow"
        @onEditClose="onEditClose"
        @onAddClose="onAddClose" />
    </div>
    <!-- 详情弹窗 -->
    <div>
      <Customdialog2
        v-if="dialogOptions2.visible"
        :options="dialogOptions2"
        :row="currentRow"
        :ruleid="ruleid"
        @onEditClose="onEditClose2"
        @onAddClose="onAddClose2" />
      <el-dialog title="转换规则文件" :visible.sync="dialogTableVisible">
        <div
          style="display: flex; align-items: center; margin: 0px 0px 20px 5px">
          <div>
            <span style="font-weight: 600">名称:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.name }}</span
            >
          </div>
          <div>
            <span style="font-weight: 600">时间:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.createtime }}</span
            >
          </div>
          <div style="margin-left: auto">
            <el-button
              type="primary"
              size="mini"
              style="margin-right: 120px"
              @click="onAdd2">
              新增
            </el-button>
          </div>
        </div>

        <el-table :data="gridData">
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="metaatext" label="来源文件"> </el-table-column>
          <el-table-column prop="fromfieldstext" label="来源描述字段"> </el-table-column>
          <el-table-column prop="metabtext" label="目标文件"> </el-table-column>
          <el-table-column prop="tofieldstext" label="目标描述字段"> </el-table-column>
          <el-table-column prop="tagtext" label="标签" v-show=false> </el-table-column>
          <el-table-column prop="transferoperatorclass" label="算子class" >
          </el-table-column>
          <el-table-column prop="transferoperatorfunction" label="转换算子方法">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editRow2(scope.row)"
                >编辑</el-button
              >
              <template>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteRow2(scope.row)">
                  <el-button
                    type="text"
                    size="small"
                    style="color: red; margin-left: 10px"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 页码 -->
    <el-pagination
      style="margin-top: 10px"
      layout="total,  prev, pager, next, jumper"
      :pageSize="pagination.pageSize"
      :total="pagination.total"
      :pageSizes="pagination.pageSizes"
      @current-change="pageChange"
      @size-change="sizesChange">
    </el-pagination>
  </el-card>
</template>

<script>
  import Customdialog from "./components/index.vue";
  import Customdialog2 from "./components/index2.vue";

  export default {
    components: {
      Customdialog,
      Customdialog2,
    },
    data() {
      return {
        text11:"",
        ruleid: null,
        currentRow: null,
        gridData: [
          {
            id: 1,
            fromfields: "来源字段",
            tofields: "目标text",
            transferoperatorclass: "text",
            transferoperatorfunction: "参数text",
          },
          {
            id: 2,
            fromfields: "来源字段",
            tofields: "目标text",
            transferoperatorclass: "text",
            transferoperatorfunction: "参数text",
          },
          {
            id: 3,
            fromfields: "来源字段",
            tofields: "目标text",
            transferoperatorclass: "text",
            transferoperatorfunction: "参数text",
          },
        ],
        dialogTableVisible: false,
        dialogOptions: {
          title: "",
          visible: false,
          size: "small-dialog-box",
        },
        dialogOptions2: {
          title: "",
          visible: false,
          size: "small-dialog-box",
        },

        tableData: [
          { id: 1, name: "转换规则文件名称1", createtime: "2024-07-18" },
          { id: 2, name: "转换规则文件名称2", createtime: "2024-07-12" },
        ],
        //标签
        tagValue: 0,
        tagItem: [
          { id: 2, name: "test1" },
          { id: 3, name: "test2" },
        ],
        detailsdata: {
          name: null,
          createtime: null,
        },
        // 类型
        value: 0,
        search: "",
        searchtype: null,
        // 分页参数
        pagination: {
          pageSize: 10,
          pageSizes: [10, 20],
          currentPage: 1,
          total: 50,
          layout: "total, sizes, prev, pager, next, jumper",
          onSizeChange: this.onSizeChange,
          onCurrentChange: this.onCurrentChange,
          order_field: "",
          order_type: "",
        },
      };
    },
    created() {
      this.init();
    },
    watch: {},
    methods: {
      init() {
        this.getAll();

        // this.AllRulefield();
      },
      //分页查询规则文件数据
      getAll(params) {
        let item = { params };
        let itemJosn = JSON.stringify(item);
        let result = window.iRule.findList(
          itemJosn,
          this.pagination.currentPage,
          this.pagination.pageSize
        );
        let res = JSON.parse(result);
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
      },

      //查询所有规则文件字段
      AllRulefield(params) {
        let result = window.iRuleItem.getAllfield(params);
        let res = JSON.parse(result);
        this.gridData = res.data;
      },
      //搜索
      handleSearch() {
        let item = {
          name: this.search,
        };
        let itemJosn = JSON.stringify(item);
        let result = window.iRule.findList(
          itemJosn,
          this.pagination.currentPage,
          this.pagination.pageSize
        );
        let res = JSON.parse(result);
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
      },

      handleClick(row) {
        // console.log(row);
      },
      //新增
      onAdd() {
        this.dialogOptions.title = "新增";
        this.dialogOptions.visible = true;
        this.currentRow = null;
      },
      //编辑
      editRow(row) {
        this.currentRow = row;
        // console.log("🚀 ~ editRow ~  this.currentRow :", this.currentRow);
        this.dialogOptions.title = "编辑";
        this.dialogOptions.visible = true;
      },
      //详情
      details(row) {
        console.log("🚀 ~ details ~ row:", row);
        this.AllRulefield(row.id);
        this.ruleid = row.id;
        this.currentRow = row;
        this.detailsdata = row;
        this.dialogTableVisible = true;
      },
      // 删除
      deleteRow(row) {
        console.log("🚀 ~ deleteRow ~ scope:", row);
        var result = window.iRule.delete(row.id);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
          let newPageing = Math.ceil(
            (this.pagination.total - 1) / this.pagination.pageSize
          ); //Math.ceil向上取整算出新的分页
          let currentPage =
            this.pagination.currentPage > newPageing
              ? newPageing
              : this.pagination.currentPage; //计算当前页应该是哪页
          this.pagination.currentPage = currentPage < 1 ? 1 : currentPage; //把当前页的值赋给this.page,重新渲染列表
        } else {
          this.$message.error(res.msg);
        }
        this.getAll();
        // this.tableData = this.tableData.filter((item) => item !== row);
      },
      onEditClose(data) {
        console.log("🚀 ~ onEditClose ~ data:", data);
        this.currentRow = data;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iRule.update(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        } else {
          this.currentRow = null;
        }
        this.dialogOptions.visible = false;
      },
      onAddClose(data) {
        console.log("🚀 ~ onAddClose ~ data:", data);
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iRule.add(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        }
        this.dialogOptions.visible = false;
      },

      // 新增2
      onAdd2() {
        this.dialogOptions2.title = "新增";
        this.dialogOptions2.visible = true;
        this.currentRow = null;
      },
      //编辑2
      editRow2(row) {
        this.currentRow = row;
        // console.log("🚀 ~ editRow ~  this.currentRow :", this.currentRow);
        this.dialogOptions2.title = "编辑";
        this.dialogOptions2.visible = true;
      },
      // 删除2
      deleteRow2(row) {
        console.log("🚀 ~ deleteRow ~ scope:", row);
        var result = window.iRuleItem.deletefield(row.id);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
          let newPageing = Math.ceil(
            (this.pagination.total - 1) / this.pagination.pageSize
          ); //Math.ceil向上取整算出新的分页
          let currentPage =
            this.pagination.currentPage > newPageing
              ? newPageing
              : this.pagination.currentPage; //计算当前页应该是哪页
          this.pagination.currentPage = currentPage < 1 ? 1 : currentPage; //把当前页的值赋给this.page,重新渲染列表
        } else {
          this.$message.error(res.msg);
        }
        this.AllRulefield(this.ruleid);
      },
      onEditClose2(data) {
        console.log("🚀 ~ onEditClose ~ data:", data);
        this.currentRow = data;
        // this.text11 = data ;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iRuleItem.updatefield(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.AllRulefield(data.ruleid);
        } else {
          this.currentRow = null;
        }
        this.dialogOptions2.visible = false;
      },
      onAddClose2(data) {
        console.log("🚀 ~ onAddClose ~ data:", data);
        // this.tableData.push(data);
        // this.text11 = data ;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iRuleItem.updatefield(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.AllRulefield(data.ruleid);
        }
        this.dialogOptions2.visible = false;
      },
      //当前页数监听
      pageChange(val) {
        console.log("🚀 ~ pageChange ~ val:", val);
        this.pagination.currentPage = val;
        this.init();
      },
      //每页条数监听
      sizesChange(val) {
        // console.log("🚀 ~ sizesChange ~ val:", val);
        // this.pagination.pageSize = val;
        // this.getAll();
      },
    },
  };
</script>
<style scoped>
  .operator {
    width: 100%;
    height: 98%;
  }
  :deep(.el-dialog) {
    width: 75%;
    /* padding-right: 30px; */
    border-radius: 15px;
  }
  /* :deep .el-table__body,
  .el-table__footer,
  .el-table__header {
    width: 100% !important;
  } */
</style>
